<template>
  <div class="echarts-container">
    <div class="echarts-top">
      <!-- <h3>
        <span>性别</span>
      </h3> -->
    </div>
    <div ref="echarts" class="echarts-content"></div>
  </div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { PieChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  GridComponent
} from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  ToolboxComponent,
  PieChart,
  CanvasRenderer
])

export default {
  data() {
    return { };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      const myChart = echarts.init(this.$refs.echarts);
      const option = {
        title: {
          text:"性别",
          left:5,
          top:5
        },
        legend: {
          data: ["男", "女", "其他"],
        },
        tooltip:{
          show:true,
          triggerOn: 'mousemove'
        },
        label: {
          formatter: (arg) => {
            // console.log("------------");
            // console.log(arg);
            return `${arg.name}:${arg.value}人\n占比:${arg.percent}%`;
          },
        },
        series: [
          {
            type: "pie",
            // radius: 20,// 饼图半径
            radius: "45%",// div 较小的边为参考百分比
            // radius: ["70%","85%"],// 圆环，第一个是内半径，第二个是外半径
            roseType:'radius', // 南丁格尔图（半径不一样）
            selectedMode:'multiple',//single 默认, multiple  选中之后离开饼图一段距离
            selectedOffset: 30, // 选中离开的距离
            center: ["50%", '50%'], // 饼图的圆心
            hoverAnimation: false, // 鼠标移入以后，不再有放大效果
            // labelLine: {
            //   show:false // 隐藏指示线
            // },
            // label:{
            //   position:'center' //圆环的时候 在中心显示
            // },
            data: [
              {
                name: "男",
                value: "75",
              },
              {
                name: "女",
                value: "80",
              },
              {
                name: "其他",
                value: "70",
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
